<template>
   
    <!-- Project Card -->
    <a-card class="card-project" hoverable style="width: 260px;">
        <img slot="cover" alt="example" :src="cover" width="260" />
        <div class="card-tag"> {{ topTitle }}</div>
        <h5>{{ title }}</h5>
        <p>
            {{ subTitle }}
        </p>
        <a-row type="flex" :gutter="6" class="card-footer" align="middle">
            <a-col :span="12">
                <a-button size="small" @click="tapBtn()">查看项目</a-button>
            </a-col>
            <a-col :span="12" class="text-right">
                <a-space :size="-12" class="avatar-chips">
                    <a-avatar size="small" v-for="(img, index) in team" :key="index" :src="img" />
                </a-space>
            </a-col>
        </a-row>
    </a-card>
</template>

<script setup>
const emit = defineEmits(['confirm']);
const props = defineProps({
    keyVal:{
        type:[String,Number],
        required: false,

    },
    topTitle: {
        type: Number,
        required: true,
        default:'项目 #1'
    },
    title: {
        type: String,
        default: "",
        default:'微信小程序A'
    },
    subTitle: {
        type: String,
        default: "基于UniApp构建",
    },
    cover: {
        type: String,
        default: "/images/home-decor-3.jpeg",
    },
    team: {
        type: Array,
        default: () => [
            "images/face-1.jpg",
            "images/face-4.jpg",
            "images/face-2.jpg",
            "images/face-3.jpg",
        ],
    },
})
function tapBtn(){
    console.log(props)
    emit('confirm',props.keyVal);
}
</script>

<style lang="scss" scoped>
@import '@/scss/muse.scss';
</style>